import React, { Component } from 'react';
import '../styles/MyEntry.css'
import { index_nav } from "../api/home";
class MyEntry extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [
                // {pic,text:"护肤"},
                // {pic,text:"美妆"},
                // {pic,text:"香氛"},
                // {pic,text:"进口酒"},
                // {pic,text:"国产酒"},
                // {pic,text:"精品奢货"},
                // {pic,text:"食品百货"},
                // {pic,text:"母婴专区"},
                // {pic,text:"直播专区"},
                // {pic,text:"特卖专场"},
            ],
            currentIndex:0
        }
    }
    handleClick(index) {
        this.setState({
            currentIndex:index
        })
    }
    componentDidMount() {
        index_nav().then((res) => {
            console.log(res.data.list)
            this.setState({list:res.data.list})
        })
      }
    render() {
        return (
            <div className='my-entry'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            
                           
                            <div className={`ull ${this.state.currentIndex === index ? 'active' : ''}`} onClick={() => { this.handleClick(index) }} key={index}>
                                    
                                    <img src={item.pic} alt="" />
                                    <p>{ item.name}</p>
                                    </div>
                          
                        )
                        
                })
                }
              
            </div>
        );
    }
}

export default MyEntry;